<script setup lang="ts">
interface Props {
   size?: "large" | "middle" | "small" | "mini" | "default";
   type?: "primary" | "plain" | "gray";
}

withDefaults(defineProps<Props>(), {
   size: "middle",
   type:"primary"
});
</script>

<template>
   <button class="button ellipsis" :class="[size,type]">
      <slot></slot>
   </button>
</template>

<style scoped lang="less">
.button {
   appearance: none;
   border: none;
   outline: none;
   background: #fff;
   text-align: center;
   border: 1px solid transparent;
   border-radius: 4px;
   cursor: pointer;
   transition: all .5s linear;

   &:hover {
      background-color: #2dccab;
   }
}

.large {
   width: 240px;
   height: 50px;
   font-size: 16px;
}

.middle {
   width: 180px;
   height: 50px;
   font-size: 16px;
}

.small {
   width: 100px;
   height: 32px;
   font-size: 14px;
}

.mini {
   width: 60px;
   height: 32px;
   font-size: 14px;
}

.default {
   border-color: #e4e4e4;
   color: #666;
}

.primary {
   border-color: @xtxColor;
   background: @xtxColor;
   color: #fff;
}

.plain {
   border-color: @xtxColor;
   color: @xtxColor;
   background: lighten(@xtxColor, 50%);
}

.gray {
   border-color: #ccc;
   background: #ccc;;
   color: #fff;
}
</style>
